<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .img_collection_flex{
            display: flex;
            height: 900px;
            flex-wrap: wrap;
            box-sizing: border-box;
        }
        .img_collection_flex > div{
            width: 25%;
            overflow: hidden;
            height: 100%;
        }
        .img_collection_entire{
            position: relative;
        }
        .img_collection_half_box{
            position: relative;
            height: 50%;
        }
        .img_collection_text h3{
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_b_nav);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .img_collection_text p{
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            color: var(--c_b_nav);
        }
        .img_collection_half_box img,.img_collection_entire img{
            width: 100%;
            height: 100%;
        }
        .img_collection_text{
            position: absolute;
            bottom: 50px;
            width: 100%;
            padding: 0 20px;
            left: 0;
            right: 0;
            margin: auto;
        }
        .img_collection_title{
            display: flex;
            background-color: var(--c_theme);
        }
        .img_collection_title .public_title{
            margin: auto;
        }
        .img_collection_title .public_title h2{
            color: var(--c_b_nav);
        }
        .img_collection_title .public_title p{
            color: var(--c_b_nav);
        }
        .img_collection_order_1{
            order: 1;
        }
        .img_collection_order_2{
            order: 2;
        }
        .img_collection_order_3{
            order: 3;
        }
        .img_collection_order_4{
            order: 4;
        }
        @media (max-width:1240px) {
            .img_collection_flex{
                height: fit-content;
            }
            .img_collection_order_3{
                order: 1;
            }
            .img_collection_flex > div{
                width: 100%;
                height: 200px;
            }
            .img_collection_flex > .img_collection_half{
                height: 400px;
            }
            .img_collection_half_box img,.img_collection_entire img{
                object-fit: cover;
                object-position: center;
            }
            .img_collection_half_box{
                height: 200px;
            }
            .img_collection_order_1{order: 3;}
        }
        @media (max-width:768px) {}
    </style>
</head>

<body>
    <div class="img_collection modular img_collection_flex">
        <div class="img_collection_entire img_collection_order_1">
            <img src="https://24931802.s61i.faiusr.com/2/AD0I2tvxCxACGAAg1vnO_QUo6LzRmwIwqwc4yA0.jpg" alt="">
            <div class="img_collection_text">
                <h3>XXXXX-广州商业用地园林一角</h3>
                <p>XXXXX-广州商业用地园林一角</p>
            </div>
        </div>
        <div class="img_collection_half img_collection_order_2">
            <div class="img_collection_half_box">
                <img src="https://24931802.s61i.faiusr.com/2/AD0I2tvxCxACGAAg3-nO_QUo8ceJpwQwwgc4owc.jpg" alt="">
                <div class="img_collection_text">
                    <h3>XXXXX-广州商业用地园林一角</h3>
                    <p>XXXXX-广州商业用地园林一角</p>
                </div>
            </div>
            <div class="img_collection_half_box">
                <img src="https://24931802.s61i.faiusr.com/2/AD0I2tvxCxACGAAg5-nO_QUohPXU8wMwwAc4-AU.jpg" alt="">
                <div class="img_collection_text">
                    <h3>XXXXX-广州商业用地园林一角</h3>
                    <p>XXXXX-广州商业用地园林一角</p>
                </div>
            </div>
        </div>
        <div class="img_collection_title  img_collection_order_3">
            <div class="public_title">
                <h2>More</h2>
                <p>更多优秀案例</p>
            </div>
        </div>
        <div class="img_collection_half  img_collection_order_4">
            <div class="img_collection_half_box">
                <img src="https://24931802.s61i.faiusr.com/2/AD0I2tvxCxACGAAg8-nO_QUo_Nf5vQUwigc48QY.jpg" alt="">
                <div class="img_collection_text">
                    <h3>XXXXX-广州商业用地园林一角</h3>
                    <p>XXXXX-广州商业用地园林一角</p>
                </div>
            </div>
            <div class="img_collection_half_box">
                <img src="https://24931802.s61i.faiusr.com/2/AD0I2tvxCxACGAAg_fnO_QUo_Oi05AMwkwc4_QY.jpg" alt="">
                <div class="img_collection_text">
                    <h3>XXXXX-广州商业用地园林一角</h3>
                    <p>XXXXX-广州商业用地园林一角</p>
                </div>
            </div>
        </div>
    </div>

</body>

</html>